{% extends "auth.html" %}

{% block regular_content %}
<div id="modal_tags" class="hidden fixed z-50 py-4 px-16 bg-blue-400 border-2 border-gray-400 rounded-lg text-lg text-center" style="top: 20%; left: 50%; transform: translate(-50%, -50%);">
    <div class="absolute top-2 right-2" onclick="$('#modal_tags').hide();$('#modal_mask').hide();">
        <svg class="fill-current h-12 w-12 ml-auto text-white cursor-pointer" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <title>{{_('close')}}</title>
            <path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/>
        </svg>
    </div>
    <div class="text-white font-bold text-2xl mt-2 mb-4">Update the tags of <span id="tags_username"></span></div>
    <div id="tags_container" class="flex flex-row w-full gap-4">
        <div class="flex flex-col gap-2 items-center">
            <div class="bg-red-500 text-white py-1 rounded-lg font-bold px-3">{{_('certified_teacher')}} ⊙</div>
            <input type="checkbox" id="certified_tag_input" class="tags-input bg-white">
        </div>
        <div class="flex flex-col gap-2 items-center">
            <div class="bg-indigo-500 text-white py-1 rounded-lg font-bold px-3">{{_('distinguished_user')}} ⊙</div>
            <input type="checkbox" id="distinguished_tag_input" class="tags-input bg-white">
        </div>
        <div class="flex flex-col gap-2 items-center">
            <div class="bg-pink-500 text-white py-1 rounded-lg font-bold px-3">{{_('contributor')}} ⊙</div>
            <input type="checkbox" id="contributor_tag_input" class="tags-input bg-white">
        </div>
    </div>
    <button class="green-btn mt-4" onclick="hedyApp.update_user_tags();">Update tags</button>
</div>
<div class="flex flex-row items-center justify-between border-b">
    <h1>Users overview</h1>
    <div class="fle flex-row gap-2">
        <button type="reset" class="green-btn" data-cy="return_button" onclick="window.open('/admin', '_self');">Return to admin page</button>
        <button type="reset" class="yellow-btn text-white" data-cy="view_all_button" onclick="window.open('?filter=all', '_self');">View all users</button>
    </div>
</div>
<div class="w-full mt-4" id="program_filter">
    <form id="filterform" onsubmit="event.preventDefault (); hedyApp.filter_admin();">
        <div class="px-4 w-full flex flex-row border border-gray-400 py-2 rounded-lg">
            <div class="p-2 ltr:mr-4 rtl:ml-4">
                <h2 class="px-8">Visible attributes</h2>
                <div class="flex flex-row items-center w-80">
                    <div class="flex flex-col">
                        <div class="flex flex-row items-center">
                            <input class="attribute inline-block ltr:ml-0 ltr:mr-3 rtl:mr-0 rtl:ml-3" type="checkbox" checked id="username" name="username"><label class="inline-block w-40" for="username">Username</label>
                        </div>
                        <div class="flex flex-row items-center">
                            <input class="attribute inline-block ltr:ml-0 ltr:mr-3 rtl:mr-0 rtl:ml-3" type="checkbox" id="count" name="count"><label class="inline-block w-40" for="count">Programs</label>
                        </div>
                        <div class="flex flex-row items-center">
                            <input class="attribute inline-block ltr:ml-0 ltr:mr-3 rtl:mr-0 rtl:ml-3" type="checkbox" checked id="email" name="email"><label class="inline-block w-40" for="email">Email</label>
                        </div>
                        <div class="flex flex-row items-center">
                            <input class="attribute inline-block ltr:ml-0 ltr:mr-3 rtl:mr-0 rtl:ml-3" type="checkbox" id="created" name="created"><label class="inline-block w-40" for="created">Created</label>
                        </div>
                        <div class="flex flex-row items-center">
                            <input class="attribute inline-block ltr:ml-0 ltr:mr-3 rtl:mr-0 rtl:ml-3" type="checkbox" checked id="last_login" name="last_login"><label class="inline-block w-40" for="last_login">Last login</label>
                        </div>
                        <div class="flex flex-row items-center">
                            <input class="attribute inline-block ltr:ml-0 ltr:mr-3 rtl:mr-0 rtl:ml-3" type="checkbox" checked id="birth_year" name="birth_year"><label class="inline-block w-40" for="birth_year">Birth year</label>
                        </div>
                        <div class="flex flex-row items-center">
                            <input class="attribute inline-block ltr:ml-0 ltr:mr-3 rtl:mr-0 rtl:ml-3" type="checkbox" checked id="language" name="language"><label class="inline-block w-40" for="language">Language</label>
                        </div>
                    </div>
                    <div class="flex flex-col">
                        <div class="flex flex-row items-center">
                            <input class="attribute inline-block ltr:ml-0 ltr:mr-3 rtl:mr-0 rtl:ml-3" type="checkbox" checked id="keyword_language" name="keyword_language"><label class="inline-block w-40" for="keyword_language">Keyword language</label>
                        </div>
                        <div class="flex flex-row items-center">
                            <input class="attribute inline-block ltr:ml-0 ltr:mr-3 rtl:mr-0 rtl:ml-3" type="checkbox" checked id="country" name="country"><label class="inline-block w-40" for="country">Country</label>
                        </div>
                        <div class="flex flex-row items-center">
                            <input class="attribute inline-block ltr:ml-0 ltr:mr-3 rtl:mr-0 rtl:ml-3" type="checkbox" id="gender" name="gender"><label class="inline-block w-40" for="gender">Gender</label>
                        </div>
                        <div class="flex flex-row items-center">
                            <input class="attribute inline-block ltr:ml-0 ltr:mr-3 rtl:mr-0 rtl:ml-3" type="checkbox" id="experience" name="experience"><label class="inline-block w-40" for="experience">Experience</label>
                        </div>
                        <div class="flex flex-row items-center">
                            <input class="attribute inline-block ltr:ml-0 ltr:mr-3 rtl:mr-0 rtl:ml-3" type="checkbox" checked id="tags" name="tags"><label class="inline-block w-40" for="tags">Tags</label>
                        </div>
                        <div class="flex flex-row items-center">
                            <input class="attribute inline-block ltr:ml-0 ltr:mr-3 rtl:mr-0 rtl:ml-3" type="checkbox" checked id="teacher" name="teacher"><label class="inline-block w-40" for="teacher">Teacher</label>
                        </div>
                        <div class="flex flex-row items-center">
                            <input class="attribute inline-block ltr:ml-0 ltr:mr-3 rtl:mr-0 rtl:ml-3" type="checkbox" id="verified" name="verified"><label class="inline-block w-40" for="verified">Verified</label>
                        </div>
                        <div class="flex flex-row items-center">
                            <input class="attribute inline-block ltr:ml-0 ltr:mr-3 rtl:mr-0 rtl:ml-3" type="checkbox" id="third_party" name="third_party"><label class="inline-block w-40" for="third_party">Third Party</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full p-2 mx-4">
                <h2 class="px-8 pb-2">Filtering options</h2>
                <select id="admin_filter_category" data-cy="admin_filter_category" class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded mr-4">
                    <option value="created" {% if filter and filter == "created" %} selected {% endif %}>Created</option>
                    <option value="last_login" {% if filter and filter == "last_login" %} selected {% endif %}>Last login</option>
                    <option value="username" {% if filter and filter == "username" %} selected {% endif %}>Username</option>
                    <option value="email" {% if filter and filter == "email" %} selected {% endif %}>E-mail</option>
                    <option value="language" {% if filter and filter == "language" %} selected {% endif %}>Language</option>
                    <option value="keyword_language" {% if filter and filter == "keyword_language" %} selected {% endif %}>Keyword language</option>
                </select>
                <div class="flex flex-row items-center">
                    <input placeholder="Enter a substring..." id="email_filter_input" type="text" {% if filter == "email" or filter == "username" %} value="{{ text_filter }}" {% endif %} class="filter_input inline-block appearance-none w-full h-16 bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded my-2 ltr:mr-2 rtl:ml-2" {% if filter != "email" and filter != "username" %}style="display: none;"{% endif %}>
                    <select id="language_filter_input" class="filter_input inline-block appearance-none w-full h-16 bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded my-2 ltr:mr-2 rtl:ml-2" {% if filter != "language" %}style="display: none;"{% endif %}>
                        <option value="{{ current_language().lang }}"{% if language_filter and language_filter == current_language().lang %} selected {% endif %}>{{ current_language().sym }}</option>
                        {% for lang in other_languages() %}
                            <option value="{{ lang.lang }}" {% if language_filter and language_filter == lang.lang %} selected {% endif %}>{{ lang.sym }}</option>
                        {% endfor %}
                    </select>
                    <select id="keyword_language_filter_input" class="filter_input inline-block appearance-none w-full h-16 bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded my-2 ltr:mr-2 rtl:ml-2" {% if filter != "keyword_language" %}style="display: none;"{% endif %}>
                        {% for lang in keyword_languages() %}
                            <option value="{{ lang.lang }}" {% if keyword_language_filter and keyword_language_filter == lang.lang %} selected {% endif %}>{{ lang.sym }}</option>
                        {% endfor %}
                    </select>
                    <div id="date_filter_input" class="filter_input flex flex-row w-full" {% if filter and filter != "created" and filter != "last_login" %}style="display: none;"{% endif %}>
                        <input type="date" id="admin_start_date" data-cy="admin_start_date" {% if start_date %} value="{{ start_date }}" {% endif %} class="inline-block appearance-none w-full h-16 bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded my-2 ltr:mr-1 rtl:ml-1">
                        <input type="date" id="admin_end_date" data-cy="admin_end_date" {% if end_date %} value="{{ end_date }}" {% endif %} class="inline-block appearance-none w-full h-16 bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded my-2">
                    </div>
                    <div class="flex flex-row ltr:ml-auto rtl:mr-auto">
                        <button type="reset" class="red-btn mx-2" onclick="window.open('/admin/users', '_self');">Reset</button>
                        <button type="submit" class="green-btn ltr:ml-2 rtl:mr-2 px-4" data-cy="submit">Filter</button>
                    </div>
                </div>
            </div>
        </div>

        <input id="hidden_page_input" type="hidden" name="page" value="">
    </form>
</div>
<h4 class="text-center">Total amount of shown users: {{ users|length }}</h4>
<div class="program w-full border-solid border-2 border-orange-400 rounded p-4">
  <table class="table-auto w-full text-sm">
    <thead>
      <tr class="font-bold text-left">
          <td id="username_header">Username</td>
          <td id="count_header" class="hidden">Programs</td>
          <td id="email_header">Email</td>
          <td id="created_header" class="hidden">Created</td>
          <td id="last_login_header">Last login</td>
          <td id="birth_year_header">Birth year</td>
          <td id="language_header">Language</td>
          <td id="keyword_language_header">Keyword lang</td>
          <td id="country_header">Country</td>
          <td id="gender_header" class="hidden">Gender</td>
          <td id="experience_header" class="hidden">Experience</td>
          <td id="tags_header" class="text-center">Tags</td>
          <td id="teacher_header" class="text-center">Teacher</td>
          <td id="teacher_header" class="text-center">Super Teacher</td>
          <td id="verified_header" class="hidden">Verified</td>
      </tr>
    </thead>
    <tbody>
      {% for user in users %}
          <tr>
            <td class="username_cell cursor-pointer"><a class="no-underline" onclick="window.open('/programs?user={{ user.username }}', '_blank');">{% if user.username|length > 18 %}{{user.username[:15] + "..."}}{% else %}{{user.username}}{% endif %}</a></td>
            <td class="count_cell hidden">{{user.program_count or 0}}</td>
            <td class="email_cell cursor-pointer"><a class="no-underline" onclick="hedyApp.changeUserEmail ('{{user.username}}', '{{user.email}}')">{% if user.email and user.email|length > 30 %}{{user.email[:27] + "..."}}{% else %}{{user.email}}{% endif %}</a></td>
            <td class="created_cell hidden">{{user.created}}</td>
            <td class="last_login_cell">{{user.last_login}}</td>
            <td class="birth_year_cell">{{user.birth_year}}</td>
            <td class="language_cell">{{user.language}}</td>
            <td class="keyword_language_cell">{{user.keyword_language}}</td>
            <td class="country_cell">{{user.country}}</td>
            <td class="gender_cell hidden">{{user.gender}}</td>
            <td class="experience_cell hidden">{{user.prog_experience}}</td>
            <td class="tags_cell text-center cursor-pointer"><span onclick="hedyApp.edit_user_tags('{{user.username}}');">✏️</span></td>
            <td id="is_teacher_{{user.username}}" class="teacher_cell text-center">
                <input id="check_teacher_{{user.username}}" type="checkbox" {% if user.is_teacher %}checked{% endif %}
                hx-trigger="click"
                hx-post="/admin/mark-as-teacher/{{user.username}}">
            </td>
            <td class="teacher_cell text-center">
                <input type="checkbox" {% if user.is_super_teacher %}checked="checked"{% endif %} 
                hx-trigger="click"
                hx-post="/admin/mark-super-teacher/{{user.username}}">
            </td>
            <td class="verified_cell hidden">{{user.email_verified}}</td>
            <td class="third_party_cell hidden text-center"><input type="checkbox" {% if user.third_party %}checked="checked"{% endif %} ></td>
          </tr>
      {% endfor %}
    </tbody>
  </table>
  {% if prev_page_token %}
  <button data-page_token="{{prev_page_token}}" class="admin_pagination_btn green-btn mt-4">« Prev page</button>
  {% endif %}
  {% if next_page_token %}
  <button data-page_token="{{next_page_token}}" class="admin_pagination_btn green-btn mt-4">Next page »</button>
  {% endif %}
</div>
{% endblock %}
